<template>
  <div class="userPage">
    <headers class="top" id="top"></headers>
    <tabDate></tabDate>
    <notice id="notice"></notice>
    <onPunch id="onPunch"></onPunch>
    <daily id="toDaily"></daily>
    <project id="toProject"></project>
    <apply id="toApply"></apply>
    <salary id="toSalary"></salary>
    <a href="#top" v-if="showUp"
      ><icon-svg name="toTop" class="topBtn"></icon-svg
    ></a>
  </div>
</template>

<script>
import headers from "@/views/pageComponents/header.vue";
import tabDate from "@/views/pageComponents/tabDate.vue";
import onPunch from "@/views/pageComponents/onPunch.vue";
import daily from "@/views/pageComponents/daily.vue";
import notice from "@/views/pageComponents/notice.vue";
import project from "@/views/pageComponents/project.vue";
import apply from "@/views/pageComponents/apply.vue";
import salary from "@/views/pageComponents/salary.vue";
export default {
  components: {
    headers,
    tabDate,
    daily,
    onPunch,
    notice,
    project,
    apply,
    salary,
  },
  data() {
    return {
      showUp: false,
      model: "haru_2",
    };
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scTop > 400) {
        this.showUp = true;
      } else {
        this.showUp = false;
      }
    });
    this.$nextTick(() => {
      this.live2dInit();
    });
  },
  methods: {
    live2dInit() {
      window.L2Dwidget.init({
        pluginRootPath: "static/live2dw/",
        pluginJsPath: "lib/",
        pluginModelPath: `live2d-widget-model-${this.model}/assets/`,
        tagMode: false,
        debug: false,
        model: {
          jsonPath: `/static/live2dw/live2d-widget-model-${this.model}/assets/haru02.model.json`,
        },
        display: { position: "left", width: 300, height: 400 },
        mobile: { show: true },
        log: false,
      });
    },
  },
};
</script>

<style lang="scss">
html,
body {
  scroll-behavior: smooth;
}
.userPage {
  background-color: #f1f4f5;
  width: 100%;
  padding-bottom: 50px;
  overflow: hidden;
  .topBtn {
    position: fixed;
    bottom: 200px;
    right: 100px;
    font-size: 70px;
    cursor: pointer;
    &:hover {
      animation: moveTop 1.5s infinite;
    }
    @keyframes moveTop {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-40px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
}
</style>
